<template>
    <div class="vue3">
        <h3 class="grey">vue3</h3>
        <div class="flex-line">
            <label>数组</label>
            <div>
                <button @click="setArrDefault">恢复数组</button>
                <button @click="setLengthZero">设置长度为0</button>
                <button @click="arrHandle('push')">push</button>
                <button @click="arrHandle('RealPush')">RealPush</button>
                <button @click="arrHandle('pop')">pop</button>
                <button @click="arrHandle('RealPop')">RealPop</button>
                <div>当前数组：{{ arr }}</div>
            </div>
        </div>

        <div class="flex-line">
            <label>对象</label>
            <div>
                <button @click="setObjDefault">恢复对象</button>
                <button @click="setProp">设置age属性</button>
                <button @click="deleteProp">删除对象属性</button>
                <button @click="inHandler">in操作符</button>
                <div>当前对象：{{ obj }}</div>
            </div>
        </div>
    </div>
    <iframe src="http://127.0.0.1:8080/"></iframe>
</template>

<script>
import * as arr from "./utils/arr";
import * as obj from "./utils/obj"

export default {
    name: "App",
    setup() {
        return {
            ...arr,
            ...obj
        };
    },
};
</script>

<style>
iframe,
.vue3 {
    height: 50vh;
    width: 100%;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
</style>
